import React from "react";
import AreaPicker from '@/components/Area/AreaPicker';
import Top from "@/components/Top";

const Profile = () => {
    // 表单实例
    const [ form ] = React.UI.Form.useForm();

    const [business] = useState<any>(React.Cookies.load('business') ?? {});
    // 地区选择
    const [AreaShow, setAreaShow] = useState<boolean>(false);
    const [AreaActive] = useState([business.province, business.city, business.district]);

    const [avatar, setAvatar] = useState<any>([
        {
            url: business.avatar_cdn
        }
    ]);

    const onSubmit = async (values:any) => {
        // 追加用户id
        values.id = business.id;

        if(!values.password)
        {
            delete values.password;
        }

        if(business.avatar)
        {
            values.avatar = business.avatar;
        }

        delete values.region_text;

        let result = await React.Http.upload('/business/profile',values);


        if(result.code === 1 )
        {
            React.toast(result.msg,() => {
                React.Cookies.save('business',result.data,{path:'/'});
            
                React.navigate(-1);
            });
        }else{
            
            React.toast(result.msg,null,'fail');
        }
    }

    const onUpload = (file: File) => {
        // 赋值
        business.avatar = file;

        return {
            url: URL.createObjectURL(file),
        }
    }

    const onAvatarDel = () => {
        business.avatar = '';
        setAvatar([]);
    }

    const onAreaConfirm = (values:any,names:any) => 
    {
        let code =null;
        for(let val of values)
        {
            if(val)
            {
                code = val;
            }
        }

        let RegionText = '';

        if(names[0])
        {
            RegionText += names[0];
        }

        if(names[1])
        {
            RegionText += `-${names[1]}`;
        }

        if(names[2])
        {
            RegionText += `-${names[2]}`;
        }

        form.setFieldsValue({
            region_text:RegionText,
            code:code
        })
    }

    return (
        <>
        <Top
        back
        >个人资料</Top>
            {/* 地区组件 */}
            <AreaPicker visible={AreaShow} active={AreaActive} onClose={() => setAreaShow(false)} onConfirm={onAreaConfirm} />

            {/* 表单结构 */}
            <React.UI.Form
                name="profile"
                layout='horizontal'
                mode='card'
                form={form}
                onFinish={onSubmit}
                footer={
                    <React.UI.Button block type='submit' color='primary' size='large'>提交修改</React.UI.Button>
                }
                style={{'--adm-color-primary':'#374588'}}
            >
                <React.UI.AutoCenter
                    style={{ margin: '30px 0px' }}
                >
                    <React.UI.ImageUploader
                        value={avatar}
                        maxCount={1}
                        onChange={setAvatar}
                        onDelete={onAvatarDel}
                        upload={onUpload}
                    />
                </React.UI.AutoCenter>

                <React.UI.Form.Item
                    name="nickname"
                    label="昵称"
                    rules={[{ required: true }]}
                    initialValue={business.nickname ?? ''}
                >
                    <React.UI.Input placeholder="请输入昵称" />
                </React.UI.Form.Item>

                <React.UI.Form.Item
                    name="mobile"
                    label="手机号"
                    rules={[{ required: true }, { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不对' }]}
                    initialValue={business.mobile ?? ''}
                >
                    <React.UI.Input placeholder="请输入手机号" />
                </React.UI.Form.Item>

                <React.UI.Form.Item
                    name="password"
                    label="密码"
                    initialValue={''}
                >
                    <React.UI.Input type="password" placeholder="密码为空即不修改" />
                </React.UI.Form.Item>

                <React.UI.Form.Item
                    name="email"
                    label="邮箱"
                    rules={[{ required: true }, { pattern: /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/, message: '邮箱格式不对' }]}
                    initialValue={business.email ?? ''}
                >
                    <React.UI.Input placeholder="请输入邮箱" />
                </React.UI.Form.Item>

                <React.UI.Form.Item
                    name="gender"
                    label="性别"
                    rules={[{ required: true }]}
                    initialValue={business.gender ?? 0}
                >
                    <React.UI.Radio.Group>
                        <React.UI.Space direction='horizontal'>
                            <React.UI.Radio value='0'>保密</React.UI.Radio>
                            <React.UI.Radio value='1'>男</React.UI.Radio>
                            <React.UI.Radio value='2'>女</React.UI.Radio>
                        </React.UI.Space>
                    </React.UI.Radio.Group>
                </React.UI.Form.Item>

                <React.UI.Form.Item
                    name="region_text"
                    label="地区"
                    onClick={() => setAreaShow(true)}
                    initialValue={business.region_text ?? ''}
                >
                    <React.UI.Input placeholder="请选择地区" readOnly />
                </React.UI.Form.Item>

                <React.UI.Form.Item
                    name="code"
                    label="地区码"
                    hidden={true}
                    initialValue={business.code ?? ''}
                >
                    <React.UI.Input placeholder="地区码" readOnly />
                </React.UI.Form.Item>

            </React.UI.Form>
        </>
    )
}

export default Profile;